import React, { Fragment, memo, useEffect } from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';

import { getHotRecommendAction } from '../../store/actionCreators';
import { GET_HOT_RECOMMEND_LIMIT } from '@/common/contents';

import ThemeHeadRcm from '@c/theme_head_rcm';
import JPSongsCover from '@c/songsCovers';
import { HotRecommendWrapper } from './style';

export default memo(function JPHotRecommend() {
  // redux hooks
  const dispatch = useDispatch();

  const { hotRecommends } = useSelector(
    (state) => ({
      hotRecommends: state.getIn(['recommend', 'hotRecommends'])
    }),
    shallowEqual
  );

  // other hooks
  useEffect(() => {
    if (!hotRecommends || hotRecommends.length === 0) {
      dispatch(getHotRecommendAction(GET_HOT_RECOMMEND_LIMIT));
    }
  }, [dispatch, hotRecommends]);

  return (
    <HotRecommendWrapper>
      <ThemeHeadRcm
        title="热门推荐"
        keywords={['华语', '流行', '民谣', '摇滚', '电子']}
      />

      <div className="recommend-list">
        {hotRecommends.map((item) => {
          return (
            <Fragment key={item.id}>
              <JPSongsCover info={item} />
            </Fragment>
          );
        })}
      </div>
    </HotRecommendWrapper>
  );
});
